<template>
	<page-wraper :safeAreaInsetBottom="false">
		<view style="padding-top: 55px; background: linear-gradient(to bottom, rgba(32,132,232, .5), #f6f6f6); ">
			<wd-row>
				<wd-col :span="8">
					<view style="text-align: center;">
						<image :src="userInfo.avatar" class="avatar" />
					</view>
				</wd-col>
				<wd-col :span="16">
					<wd-row>
						&nbsp;
					</wd-row>
					<wd-row>
						<wd-text :text="userInfo.nickname || '易行邮'" size="18px" color="#fff" />
					</wd-row>
					<wd-row>
						<wd-text :text="userInfo.email || '邀请您注册'" size="12px" color="#fff" />
					</wd-row>
				</wd-col>
			</wd-row>

			<view class="custom-card" style="margin-top: 15px;">
				<wd-grid clickable>
					<wd-grid-item icon="cart" :value="userInfo?.wait_for_pay_count || 0" text="待付款"
						link-type="navigateTo" url="/pages/order/Index?status=待付款" />
					<wd-grid-item icon="hourglass" :value="userInfo?.wait_pickup_count || 0" text="待揽收"
						link-type="navigateTo" url="/pages/order/Index?status=待揽收" />
					<wd-grid-item icon="swap" :value="userInfo?.trans_count || 0" text="运输中" link-type="navigateTo"
						url="/pages/order/Index?status=运输中" />
					<!-- 				  <wd-grid-item icon="location" :value="userInfo?.finished_count || 0" text="已签收" link-type="navigateTo" url="/pages/order/Index?status=已签收" /> -->
					<wd-grid-item icon="history" :value="userInfo?.all_order_count || 0" text="全部订单"
						link-type="navigateTo" url="/pages/order/Index" />
				</wd-grid>
			</view>
		</view>

		<demo-block title="" transparent>
			<wd-cell-group>
				<wd-cell size="large" is-link to="/pages/account/Index" clickable v-if="userInfo.mp_withdraw">
					<template #title>
						<span style="margin-left: 20px;">我的账户</span>
					</template>
					<template #icon>
						<wd-icon name="money-circle" size="20px" color="green"></wd-icon>
					</template>
				</wd-cell>
				<wd-cell size="large" is-link to="/pages/address_book/Index" clickable>
					<template #title>
						<span style="margin-left: 20px;">地址簿</span>
					</template>
					<template #icon>
						<wd-icon name="location" size="20px" color="red"></wd-icon>
					</template>
				</wd-cell>
				<wd-cell size="large" is-link to="/pages/coupon/Index" clickable>
					<template #title>
						<span style="margin-left: 20px;">我的优惠券</span>
					</template>
					<template #icon>
						<wd-icon name="a-rootlist" size="20px" color="red"></wd-icon>
					</template>
				</wd-cell>
				<wd-cell size="large" is-link clickable @click="scan">
					<template #title>
						<span style="margin-left: 20px;">扫一扫</span>
					</template>
					<template #icon>
						<wd-icon name="scan" size="20px" color="red"></wd-icon>
					</template>
				</wd-cell>
			</wd-cell-group>
		</demo-block>

		<demo-block title="" transparent v-if="userInfo.can_share">
			<wd-cell-group>
				<wd-cell size="large" is-link to="/pages/user/Index" clickable
					v-if="userInfo?.level == 1 || userInfo?.level == 2">
					<template #title>
						<span style="margin-left: 20px;">注册用户</span>
					</template>
					<template #icon>
						<wd-icon name="usergroup" size="20px" color="red"></wd-icon>
					</template>
				</wd-cell>
				<!-- 				<wd-cell size="large" is-link clickable>
					<template #title>
						<span style="margin-left: 20px;">邀请注册</span>
					</template>
					<template #icon>
						<wd-icon name="share" size="20px" color="red"></wd-icon>
					</template>
					<template #default>
						<button class="share-btn" open-type="share">分享</button>
					</template>
				</wd-cell> -->
				<wd-cell size="large" is-link clickable @click="share">
					<template #title>
						<span style="margin-left: 20px;">邀请注册</span>
					</template>
					<template #icon>
						<wd-icon name="share" size="20px" color="red"></wd-icon>
					</template>
				</wd-cell>
				<wd-cell size="large" is-link clickable to="/pages/info/Cooperate">
					<template #title>
						<span style="margin-left: 20px;">合作招募</span>
					</template>
					<template #icon>
						<wd-icon name="heart-filled" size="20px" color="red"></wd-icon>
					</template>
				</wd-cell>
			</wd-cell-group>
		</demo-block>

		<demo-block title="" transparent>
			<wd-cell size="large" is-link clickable to="/pages/info/Company">
				<template #title>
					<span style="margin-left: 20px;">公司简介</span>
				</template>
				<template #icon>
					<wd-icon name="star-on" size="20px" color="red"></wd-icon>
				</template>
			</wd-cell>
			<wd-cell-group>
				<wd-cell size="large" is-link clickable @click="openChat">
					<template #title>
						<span style="margin-left: 20px;">联系客服</span>
					</template>
					<template #icon>
						<wd-icon name="chat" size="20px" color="green"></wd-icon>
					</template>
				</wd-cell>
			</wd-cell-group>
			<wd-cell-group>
				<wd-cell size="large" is-link to="/pages/setting/Index" clickable>
					<template #title>
						<span style="margin-left: 20px;">设置</span>
					</template>
					<template #icon>
						<wd-icon name="setting" size="20px" color="rgba(32,132,232)"></wd-icon>
					</template>
				</wd-cell>
			</wd-cell-group>
		</demo-block>

		<page-nav-bar></page-nav-bar>
	</page-wraper>
</template>

<script lang="ts" setup>
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { ref, onMounted } from 'vue'
	import { getToken } from '../../store'

	const userInfo = ref<any>({
		avatar: 'https://www.ytad-pep.com/avatar.jpg'
	});
	
	function scan() {
		wx.scanCode({
			scanType: [ "barCode", "qrCode", "datamatrix", "pdf417" ],
			success: function(r) {
				if (r.result.startsWith('Coupon:')) {
					uni.$http.get(`/user/coupon/receive/${r.result.replace('Coupon:', '')}`).then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}
					});
				}
			},
			complete(r) {
				if (r.errMsg != 'scanCode:ok') {
					wx.vibrateShort({
						type: 'heavy'
					})
					
					uni.showToast({
						title: "扫描失败"
					})
				}
			}
		});
	}

	function share() {
		uni.showLoading({
			title: '加载中...'
		});

		uni.$downloadFile({
			url: 'main/share-image',
			success: (res) => {
				console.log(res);

				uni.hideLoading();

				wx.showShareImageMenu({
					path: res.tempFilePath,
					success: (re) => {
						console.log({ success1: re })
					},
					fail: (re) => {
						console.log({ fail1: re })
					}
				})
			}
		})
	}

	function openChat() {
		wx.openCustomerServiceChat({
			extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc75301ba68b76b57a' },
			corpId: 'wweda533750bf98ecd',
			success(res) { }
		})
	}

	onLoad((query : any) => {
		if (query.code) {
			uni.setStorageSync("code", query.code);
		
			uni.redirectTo({
				url: '/pages/register/Index'
			})
		} else if (!getToken()) {
			uni.redirectTo({
				url: '/pages/login/Index'
			})
		} else {
			uni.$http.get('/main/user_info').then(res => {
				if (res.data.code == 0) {
					userInfo.value = res.data.data;
		
					if (res.data.data.can_share) {
						//#ifdef MP-WEIXIN
						wx.showShareMenu({
							withShareTicket: true,
							menus: ['shareAppMessage', 'shareTimeline']
						});
						//#endif
					}
				}
			})
		}
	})
	
	onMounted(() => {
		uni.$http.get('/main/user_info').then(res => {
			if (res.data.code == 0) {
				userInfo.value = res.data.data;
				
				if (res.data.data.can_share) {
					//#ifdef MP-WEIXIN
					wx.showShareMenu({
						withShareTicket: true,
						menus: ['shareAppMessage', 'shareTimeline']
					});
					//#endif
				}
			}
		})
	});

	onShareAppMessage(opts => {
		return {
			title: '邀请注册',
			path: 'pages/register/Index?code=' + userInfo.value.code,
			imageUrl: 'https://www.ytad-pep.com/share-bg.jpg'
		};
	})

	onShareTimeline(() => {
		return {
			title: '邀请注册',
			query: 'code=' + userInfo.value.code,
			imageUrl: 'https://www.ytad-pep.com/share-bg.jpg'
		};
	})
</script>

<style lang="scss" scoped>
	:deep(.page-wraper) {
		background: #f6f6f6;
	}

	.share-btn {
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		margin-left: -100%;
		height: 100%;
		width: 200%;
	}

	.avatar {
		border-radius: 50%;
		width: 64px;
		height: 64px;
	}

	.custom-card {
		padding: var(--wot-card-padding, 0 var(--wot-size-side-padding, 15px));
		background-color: var(--wot-card-bg, var(--wot-color-white, rgb(255, 255, 255)));
		line-height: var(--wot-card-line-height, 1.1);
		margin: var(--wot-card-margin, 0 var(--wot-size-side-padding, 15px));
		border-radius: var(--wot-card-radius, 8px);
		box-shadow: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02));
		font-size: var(--wot-card-fs, var(--wot-fs-content, 14px));
		padding-top: 5px;
		padding-bottom: 5px;
	}
</style>